<template>
  <div class="pay-shop">
    <h3>商品清单</h3>
    <div class="pay-shop-all">
      <div class="pay-shop-img">
        <img src="https://shopstatic.vivo.com.cn/vivoshop/commodity/71/4171_1496689409434hd_530x530.png" alt="">
      </div>
      <div class="pay-shop-right">
        <div class="pay-shops">
          <span class="pay-shop-left">X9Plus全球通</span>
          <span class="pay-shop-number">×1</span>
        </div>
        <p class="pay-content">X9s Plus A 5.85英寸大屏，双引擎闪充，4015mAh大电池，持久续航（注：面部识别需升级到最新系统使用）</p>
        <p class="pay-shop-money">￥2789</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less">
  .pay-shop{
    width: 100%;
    background: white;
    h3{
      border-top: 0.2rem solid #F4F4F4;
      line-height: 1.2rem;
      border-bottom: 1px solid #eee;
      padding-left: 0.42rem;
      font-size: 0.42rem;
    }
    .pay-shop-all{
      width: 100%;
      height: 3rem;
      .pay-shop-img{
        width: 30%;
        float: left;
        height: 3rem;
        img{
          width: 3rem;
          padding: .2rem;
        }
      }
      .pay-shop-right{
        margin-top: .2rem;
        float: left;
        width: 70%;
        .pay-shops{
          width: 100%;
          display: flex;
          justify-content: space-between;
          margin-top: .2rem;
          .pay-shop-left{
            font-size: .5rem;
          }
          .pay-shop-number{
            padding-right: .5rem;
            font-size: .5rem;
          }
        }
      .pay-content{
        font-size: 0.25rem;
        line-height: 0.36rem;
        margin-top: 0.2rem;
        padding-right: .5rem;
        text-indent: 2em;
      }
      .pay-shop-money{
        float: right;
        margin-top: 0.1rem;
        margin-right: 0.5rem;
        font-size: 0.42rem;
        color: #55B8F0;
        }
      }
    }
  }
</style>
